<template>
  <div class="personal-main">
    <div class="personal-pay">
      <h3><i>借款人信息认证</i></h3>
      <el-steps
        :active="active"
        finish-status="success"
        simple
        style="margin-top: 20px"
      >
        <el-step title="填写借款人信息"></el-step>
        <el-step title="提交平台审核"></el-step>
        <el-step title="认证结果"></el-step>
      </el-steps>
      <div v-if="active === 0">
        <h6>个人基本信息</h6>
        <el-form label-width="120px">
          <el-form-item label="年龄">
            <el-col :span="5">
              <el-input v-model="borrower.age" />
            </el-col>
          </el-form-item>
          <el-form-item label="性别">
            <el-select v-model="borrower.sex">
              <el-option :value="1" :label="'男'" />
              <el-option :value="0" :label="'女'" />
            </el-select>
          </el-form-item>
          <el-form-item label="婚否">
            <el-select v-model="borrower.marry">
              <el-option :value="true" :label="'是'" />
              <el-option :value="false" :label="'否'" />
            </el-select>
          </el-form-item>
          <el-form-item label="学历">
            <el-select v-model="borrower.education">
              <el-option
                v-for="item in educationList"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="行业">
            <el-select v-model="borrower.industry">
              <el-option
                v-for="item in industryList"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="月收入">
            <el-select v-model="borrower.income">
              <el-option
                v-for="item in incomeList"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="还款来源">
            <el-select v-model="borrower.returnSource">
              <el-option
                v-for="item in returnSourceList"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-form>
        <h6>联系人信息</h6>
        <el-form label-width="120px">
          <el-form-item label="联系人姓名">
            <el-col :span="5">
              <el-input v-model="borrower.contactsName" />
            </el-col>
          </el-form-item>
          <el-form-item label="联系人手机">
            <el-col :span="5">
              <el-input v-model="borrower.contactsMobile" />
            </el-col>
          </el-form-item>
          <el-form-item label="联系人关系">
            <el-select v-model="borrower.contactsRelation">
              <el-option
                v-for="item in contactsRelationList"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-form>
        <h6>身份认证信息</h6>
        <el-form label-width="120px">
          <el-form-item label="身份证人像面">
            <el-upload
              :on-success="onUploadSuccessIdCard1"
              :on-remove="onUploadRemoveIdCard1"
              :multiple="false"
              :action="uploadUrl"
              :data="{ module: 'idCard1' }"
              :limit="1"
              list-type="picture-card"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="身份证国徽面">
            <el-upload
              :on-success="onUploadSuccessIdCard2"
              :on-remove="onUploadRemoveIdCard2"
              :multiple="false"
              :action="uploadUrl"
              :data="{ module: 'idCard2' }"
              :limit="1"
              list-type="picture-card"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </el-form>
        <h6>其他信息</h6>
        <el-form label-width="120px">
          <el-form-item label="房产信息">
            <!-- 
              data表示上传组件 提交请求的请求参数 {k1:v1,k2:v2}
                提交上传请求时参数拼接方式：uploadUrl?k1=v1&k2=v2

             -->
            <el-upload
              :on-success="onUploadSuccessHouse"
              :on-remove="onUploadRemoveHouse"
              :multiple="false"
              :action="uploadUrl"
              :data="{ module: 'house' }"
              list-type="picture-card"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="车辆信息">
            <el-upload
              :on-success="onUploadSuccessCar"
              :on-remove="onUploadRemoveCar"
              :multiple="false"
              :action="uploadUrl"
              :data="{ module: 'car' }"
              list-type="picture-card"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </el-form>

        <el-form label-width="120px">
          <el-form-item>
            <el-button
              type="primary"
              :disabled="submitBtnDisabled"
              @click="saveBorrower"
            >
              提交
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <div v-else-if="active === 1">
        <div style="margin-top:40px;">
          <el-alert
            title="您的认证申请已成功提交，请耐心等待"
            type="warning"
            show-icon
            :closable="false"
          >
            我们将在2小时内完成审核，审核时间为周一至周五8:00至20:00。
          </el-alert>
        </div>
      </div>
      <div v-else-if="active === 2">
        <div style="margin-top:40px;">
          <el-alert
            v-if="borrowerStatus === 2"
            title="您的认证审批已通过"
            type="success"
            show-icon
            :closable="false"
          >
          </el-alert>
          <NuxtLink to="/user/apply">
            <el-button v-if="borrowerStatus === 2" size="mini" type="success">
              我要借款
            </el-button>
          </NuxtLink>

          <el-alert
            v-if="borrowerStatus === -1"
            title="您的认证审批未通过"
            type="error"
            show-icon
            :closable="false"
          >
            <el-button @click="active = 0" size="mini" type="info"
              >重新申请</el-button
            >
          </el-alert>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      borrowerStatus: null,
      //上传组件上传的地址
      uploadUrl: "http://192.168.1.170/api/oss/upload",
      submitBtnDisabled: false,
      //借款人信息
      borrower: {
        //借款人的附件列表，每上传成功一个附件 封装为一个BorrowerAttach json对象存入到集合中
        borrowerAttaches: [],
      },
      active: null,
      educationList: [], //学历
      industryList: [], //行业
      incomeList: [], //月收入
      returnSourceList: [], //还款来源
      contactsRelationList: [], //联系人关系
    };
  },
  // created() {
  //   this.initDicts();
  // },
  mounted() {
    this.getStatus();
  },
  methods: {
    //查询借款人申请状态：0展示第一步页面，1展示第二步页面  2/-1展示第三步页面
    getStatus() {
      let token = localStorage.getItem("srb-token");
      if (!token) {
        this.$message.warning("请先登录");
        return;
      }
      //将借款人数据提交到后端保存
      this.$axios({
        url: "/api/core/borrower/auth/status",
        method: "GET",
        headers: { token },
      }).then((r) => {
        this.borrowerStatus = r.data.data.status;
        if (this.borrowerStatus === 0) {
          this.active = 0;
          this.initDicts();
        } else if (this.borrowerStatus === 1) {
          this.active = 1;
        } else {
          this.active = 2;
        }
      });
    },
    //==========================上传组件事件函数开始
    //1、身份证正面照上传的回调
    onUploadSuccessIdCard1(response, file, fileList) {
      //保存上传成功的文件路径
      // console.log(response.data.path, file);
      this.borrower.borrowerAttaches.push({
        imageUrl: response.data.path,
        imageName: "身份证正面照",
        imageType: "idCard1",
      });
    },
    onUploadRemoveIdCard1(file, fileList) {
      //远程访问oss删除文件的接口 删除文件，删除成功剔除掉数组中的该附件
      let attachs = [];
      let idCard1Url;
      this.borrower.borrowerAttaches.forEach((attach) => {
        if (attach.imageType != "idCard1") {
          attachs.push(attach);
        } else {
          idCard1Url = attach.imageUrl;
        }
      });
      //提交删除文件的请求
      if (idCard1Url) {
        this.$axios({
          url: "/api/oss/delete",
          method: "DELETE",
          params: { path: idCard1Url },
        }).then((r) => {
          this.borrower.borrowerAttaches = attachs;
          this.$message.success("取消身份证正面照上传");
        });
      }
    },
    //2、身份证反面照上传回调
    onUploadSuccessIdCard2(response, file, fileList) {
      this.borrower.borrowerAttaches.push({
        imageUrl: response.data.path,
        imageName: "身份证背面照",
        imageType: "idCard2",
      });
    },
    onUploadRemoveIdCard2(file, fileList) {
      //远程访问oss删除文件的接口 删除文件，删除成功剔除掉数组中的该附件
      let attachs = [];
      let idCard2Url;
      this.borrower.borrowerAttaches.forEach((attach) => {
        if (attach.imageType != "idCard2") {
          attachs.push(attach);
        } else {
          idCard2Url = attach.imageUrl;
        }
      });
      //提交删除文件的请求
      if (idCard2Url) {
        this.$axios({
          url: "/api/oss/delete",
          method: "DELETE",
          params: { path: idCard2Url },
        }).then((r) => {
          this.borrower.borrowerAttaches = attachs;
          this.$message.success("取消身份证背面照上传");
        });
      }
    },
    //3、房产信息上传回调
    onUploadSuccessHouse(response, file, fileList) {
      this.borrower.borrowerAttaches.push({
        imageUrl: response.data.path,
        imageName: "房产证",
        imageType: "house",
      });
    },
    onUploadRemoveHouse(file, fileList) {},
    //4、车辆信息上传回调
    onUploadSuccessCar(response, file, fileList) {
      this.borrower.borrowerAttaches.push({
        imageUrl: response.data.path,
        imageName: "车",
        imageType: "car",
      });
    },
    onUploadRemoveCar(file, fileList) {},
    //==========================上传组件事件函数结束

    //提交借款人数据
    saveBorrower() {
      let token = localStorage.getItem("srb-token");
      if (!token) {
        this.$message.warning("请先登录");
        return;
      }
      //将借款人数据提交到后端保存
      this.$axios({
        url: "/api/core/borrower/auth/borrowerVO",
        method: "POST",
        headers: { token },
        data: this.borrower,
      }).then((r) => {
        this.$message.success("提交成功");
        //跳到第二步页面展示
        this.active = 1;
      });
    },
    initDicts() {
      //加载学历：
      this.$axios.$get(`/api/core/dict/dicts/education`).then((r) => {
        this.educationList = r.data.items;
      });
      //行业
      this.$axios.$get(`/api/core/dict/dicts/industry`).then((r) => {
        this.industryList = r.data.items;
      });
      //月收入
      this.$axios.$get(`/api/core/dict/dicts/income`).then((r) => {
        this.incomeList = r.data.items;
      });
      //还款来源
      this.$axios.$get(`/api/core/dict/dicts/returnSource`).then((r) => {
        this.returnSourceList = r.data.items;
      });
      //关系
      this.$axios.$get(`/api/core/dict/dicts/relation`).then((r) => {
        this.contactsRelationList = r.data.items;
      });
    },
  },
};
</script>
